<template>
  <div
    :class="[
      'flex justify-center',
      props.align === 'vertical' ? 'flex-row' : 'flex-col',
      'rounded-[50px] bg-[var(--el-bg-color)] p-5px'
    ]"
    style="box-shadow: 5px 5px 5px rgb(0 0 0 / 20%)"
  >
    <div
      v-show="(p.name === 'Back' && props.isShowBack) || (p.name === 'Right' && props.isShowRight) || p.component === Delete"
      v-for="(p, index) in operaList"
      :key="index"
      :class="[
        'rounded-[50%] text-center p-[5px] hover:bg-[rgba(0,0,0,0.1)]',
        p.name === 'Back' && props.align === 'horizontal' ? 'rotate-[90deg] transform' : '',
        p.name === 'Right' && props.align === 'horizontal' ? 'rotate-[90deg] transform' : ''
      ]"
      @click="change(p)"
    >
      <el-icon size="22" color="#000"><component :is="p.component"></component></el-icon>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Delete, Back, Right } from "@element-plus/icons-vue";
import { DefineComponent, shallowRef } from "vue";
import { buttons } from "@/views/app/wechat/menus/interface";

interface Props {
  align?: "vertical" | "horizontal"; //水平或者垂直
  isShowBack?: boolean;
  isShowRight?: boolean;
  nowList?: buttons[];
  nowIndex: string;
}

const props = withDefaults(defineProps<Props>(), {
  align: "vertical",
  isShowBack: true,
  isShowRight: true,
  nowIndex: ""
});

interface operaItem {
  name: string;
  component: DefineComponent;
}

const operaList = shallowRef<operaItem[]>([
  { name: "Back", component: Back },
  { name: "Delete", component: Delete },
  { name: "Right", component: Right }
]);

// 操作
const emits = defineEmits(["update:now-list", "changeIndex"]);
const change = (p: operaItem) => {
  const index = (props.nowList as buttons[]).findIndex(e => e.key === props.nowIndex);
  if (p.name !== "Delete") {
    if (p.name === "Back") {
      const temp = (props.nowList as buttons[])[index - 1];
      (props.nowList as buttons[])[index - 1] = (props.nowList as buttons[])[index];
      (props.nowList as buttons[])[index] = temp;
    } else {
      const temp = (props.nowList as buttons[])[index + 1];
      (props.nowList as buttons[])[index + 1] = (props.nowList as buttons[])[index];
      (props.nowList as buttons[])[index] = temp;
    }
    emits("update:now-list", props.nowList);
  } else {
    (props.nowList as buttons[]).splice(index, 1);
  }
};
</script>

<style></style>
